<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的任务</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<%@ include file="/include/mobilelibs.jsp"%>
<style type="text/css">
html,
body {
	background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
	top: 44px;
	height: auto;
}
.mui-pull-top-tips {
	position: absolute;
	top: -20px;
	left: 50%;
	margin-left: -25px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
	top: 24px;
}
.mui-pull-top-wrapper {
	width: 42px;
	height: 42px;
	display: block;
	text-align: center;
	background-color: #efeff4;
	border: 1px solid #ddd;
	border-radius: 25px;
	background-clip: padding-box;
	box-shadow: 0 4px 10px #bbb;
	overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
	/*-webkit-backface-visibility: hidden;
	-webkit-transition-duration: 400ms;
	transition-duration: 400ms;*/
	
	margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
	margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
	/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
	text-align: center;
	background-color: #efeff4;
	font-size: 15px;
	line-height: 40px;
	color: #777;
}
.mui-pull-top-canvas {
	overflow: hidden;
	background-color: #fafafa;
	border-radius: 40px;
	box-shadow: 0 4px 10px #bbb;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
.mui-pull-top-canvas canvas {
	width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
	background-color: #efeff4;
}
.mui-control-item span {
	font-family: "黑体";
	font-size: 17px;
	/*border-left: 1px solid red;*/
}

.taskHeight {
	height: 2.7rem !important;
	font-size: 2rem !important;
}
.bgColor{
	background-color: #FFFFFF !important;
	margin-top: 0.4rem;
	border-bottom: 4px solid #EFEFF4;
}
.lineColor{
	    background-color: #37BC88 !important; 
	    
}
</style>
</head>

<body>
	<div class="mui-content">
		<input type="hidden" id="status" value='DOING' />  
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl"
					class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted taskHeight bgColor">
						
						<a class="mui-control-item mui-active" href="#item1mobile"> <span>进行中</span> </a> 
						<a class="mui-control-item" href="#item2mobile"> <span>已提交</span> </a>
						<a class="mui-control-item" href="#item3mobile"> <span>已审核</span> </a>
						
			
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4 lineColor"></div>
				<hr />
				<div class="mui-slider-group" style="padding-bottom: 3rem;">
					<div id="item1mobile"
						class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<nav class="mui-bar2 mui-bar-tab">
			<a class="mui-tab-item " type='list'> <span
				class="mui-icon iconfont">&#xe605;</span> <span
				class="mui-tab-label fontSize">任务大厅</span>
			</a> <a class="mui-tab-item mui-active"  type='mytask'>
				<span class="mui-icon iconfont">&#xe603;</span> <span
				class="mui-tab-label fontSize">我的任务</span>
			</a> <a class="mui-tab-item" type='person'> 
			    <span class="mui-icon iconfont">&#xe600;</span>
				<span class="mui-tab-label fontSize">个人中心</span>
			</a>
		</nav>


	</div>
	<script>
	mui.init();
    
	//添加列表项的点击事件
	mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
	  var id = this.getAttribute('id');
	  var status = this.getAttribute('status');
 	  //打开详情页面        
 	  if(status !='DOING'){
 		 mui.openWindow({
 		    id:'taskStart.html',
 		    url:'taskStart.html?id='+id+"&userId="+localStorage.userId
 		  });  
 	  }else { 
	  mui.openWindow({
	    id:'subTaskDetail.html',
	    url:'subTaskDetail.html?id='+id+"&userId="+localStorage.userId
	  });
 	  }
	});
	
	(function($) {
		
		//阻尼系数
		var deceleration = mui.os.ios?0.003:0.0009;
		$('.mui-scroll-wrapper').scroll({
			bounce: false,
			indicators: true, //是否显示滚动条
			deceleration:deceleration
		});
		$.ready(function() {
			//循环初始化所有下拉刷新，上拉加载。
			$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
				$(pullRefreshEl).pullToRefresh({
					down: {
						callback: function() {
							var self = this;
							setTimeout(function() {
								var ul = self.element.querySelector('.mui-table-view');
								ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
								self.endPullDownToRefresh();
							}, 1000);
						}
					},
					up: {
						auto: true,
						callback: function() {
							var self = this;
							setTimeout(function() {
								var ul = self.element.querySelector('.mui-table-view');
								ul.appendChild(createFragment(ul, index, 5));
								self.endPullUpToRefresh();
							}, 1000);
						}
					}
				});
			});
			var createFragment = function(ul, index, count, reverse) {
				var length = ul.querySelectorAll('.size').length;
				var divAll = document.createElement('div');
				var status ='DOING';
				if(index ==1){
					status = 'SUBMIT';
				}else if(index==2){
					status = 'PASS';
				}
					$.ajax({
						url : "findMyTaskList.json",
						cache : false,
						data: {userId:localStorage.userId,
							   status:status,
							   offset:length},
						dataType : "json",
						success : function(data) {
							var json = data.rows;
					    
                        for( var s in  json ){
                        	var div = document.createElement('div');
                        	var type = json[s].taskType;
                        	var typeValue = "";
                        	if(type =='理货'){
                        		typeValue = '<div class="below-left4">' + '<div class="iconfont5">&#xe601;</div>'+'</div>';
                        	} else if(type =='促销'){
                        		typeValue = '<div class="below-left3">' + '<div class="iconfont5">&#xe604;</div>'+'</div>';
                        	} else if(type =='数据'){
                        		typeValue = '<div class="below-left">'  + '<div class="iconfont5">&#xe607;</div>'+'</div>';
                        	} else if(type =='市调'){
                        		typeValue = '<div class="below-left1">' + '<div class="iconfont6">&#xe602;</div>'+'</div>';
                        	}
							var statusValue = "";
							if(status=='DOING')
								statusValue='进行中';
							else if(status=='SUBMIT')
								statusValue='已提交';
							else if(status=='PASS'){
								if(json[s].status=='NOPASS')
								   statusValue='审核未通过';
								else
									statusValue='审核通过';
							}


                        	div.className = 'below bgColor size mui-table-view';
                        	div.innerHTML ='<div class="below mui-table-view-cell" style="padding:0" status='+status +' id='+json[s].id+'>' +
                        	                '<div class="footer-left">'+ typeValue +'<span class="footer-text">'+type+'</span>'+
                        	                '</div>' +'<div class="footer-center">'+
                        	        		'<p class="pTitle">['+json[s].taskType+']'  + json[s].taskName+'</p>'+
                        	        		'<p class="pTime">时限：'+json[s].endDate+'</p>'+
                        	        		'<p class="pPlace">门店：'+json[s].storeName+'</p>'+
                        	        	    '</div>'+
                        	        	    '<div class="price">'+
                        	        		'<p class="priceP1">'+json[s].money+'</p>'+'<p class="priceP2">'+statusValue+'</p>'
                        	        	    '</div>'+
                        	                '</div>';
                        	  divAll.appendChild(div);
                        	}
						}
					})
				return divAll;
			};
		});
	})(mui);
	
	//添加列表项的点击事件
	mui(".mui-bar-tab").on('tap','.mui-tab-item',function(){
	  var type = this.getAttribute('type');
 	  if(type =='list') {
 		 mui.openWindow({
			    id:'list.html',
			    url:'mobile.html?userId='+localStorage.userId
			  });  
 	  }else if(type =='mytask')    {
 		 mui.openWindow({
			    id:'myTask.html',
			    url:'myTask.html?userId='+localStorage.userId
			  });  
 	  }else if(type =='person')    {
	 		 mui.openWindow({
				    id:'personalCenter.html',
				    url:'personalCenter.html?userId='+localStorage.userId
				  });  
	 	  }
	  
	});
	</script>
</body>

</html>